<template>
  <div class="q-px-sm q-py-lg">
    <t-fab
      ref="fab"
      style="position: relative"
      active-icon="add"
      color="primary"
      icon="keyboard_arrow_right"
      direction="right"
      :staticItems="obj"
      @fabItemsClick="fabItemsClick"
      dragTop="0%"
      dragLeft="0%"
      :fabDraggable="false"
      v-touch-pan.prevent.mouse="moveFab"
    >
    </t-fab>
  </div>
</template>

<script>
import { reactive,ref } from 'vue';
export default {
  setup() {
    const obj = reactive([
      { label: 'mail', icon: 'mail', color: 'orange' },
      { label: 'alarm', icon: 'alarm', color: 'purple' },
    ]);
    const fab = ref();
    const moveFab = (ev) => {
      fab.value.moveFab(ev)
    };
    return {
      fab,
      moveFab,
      obj,
      onClick() {
        console.log('Clicked on a fab action');
      },
      fabItemsClick(data) {
        console.log(data);
      },
    };
  },
};
</script>
